<template>
  <div class="w-100">
    <template v-if="fieldType === FieldType.TEXT">
      <RText v-model="value" :fieldProps="fieldProps" :placeholder="placeholder"></RText>
    </template>
    <template v-if="fieldType === FieldType.TEXTAREA">
      <RTextarea v-model="value" :fieldProps="fieldProps" :placeholder="placeholder"></RTextarea>
    </template>
    <template v-if="fieldType === FieldType.NUMBER">
      <RNumber v-model="value" :fieldProps="fieldProps" :placeholder="placeholder"></RNumber>
    </template>
    <template v-if="fieldType === FieldType.RADIO">
      <RRadio v-model="value" :fieldProps="fieldProps"></RRadio>
    </template>
    <template v-if="fieldType === FieldType.CHECKBOX">
      <RCheckbox v-model="value" :fieldProps="fieldProps"></RCheckbox>
    </template>
    <template v-if="fieldType === FieldType.SELECT">
      <RSelect v-model="value" v-model:label-value="labelValue" :fieldProps="fieldProps" :placeholder="placeholder"></RSelect>
    </template>
    <template v-if="fieldType === FieldType.DATEPICKER">
      <RDatePicker v-model="value" :fieldProps="fieldProps" :placeholder="placeholder"></RDatePicker>
    </template>
  </div>
</template>

<script setup name="FieldRender">
/**
 * 根据字段类型渲染
 */
import {ref, watch} from "vue";
import {FieldType} from "./field";
import RText from './Control/RText'
import RTextarea from "./Control/RTextarea";
import RNumber from './Control/RNumber'
import RRadio from './Control/RRadio'
import RSelect from './Control/RSelect'
import RCheckbox from './Control/RCheckbox'
import RDatePicker from './Control/RDatePicker'

const emit = defineEmits(['update:modelValue','update:labelValue']);

const props = defineProps({
  modelValue: [String, Number],
  field: Object
})

const labelValue = ref()

const fieldType = ref(props.field.fieldType)
const fieldProps = props.field.props || {}
const placeholder = props.field.placeholder
const value = ref()

watch(() => props.modelValue, () => {
  value.value = props.modelValue
}, {immediate: true})

watch(value, function (newValue) {
  emit('update:modelValue', newValue)
})

watch(labelValue, (newValue)=>{
  emit('update:labelValue', newValue)
})

</script>

<style scoped>

</style>
